<template>
  <div>
    <div id="testEachart" class="testEachart" />
  </div>
</template>

<script>
export default {
  name: 'EchartTest',
  components: {},
  data() {
    return {

      timeData: ['2021/01/00', '2021/01/01', '2021/01/02', '2021/01/03', '2021/01/04', '2021/01/05', '2021/01/06', '2021/01/07', '2021/01/08', '2021/01/09', '2021/01/010', '2021/01/011', '2021/01/012', '2021/01/013', '2021/01/014', '2021/01/015', '2021/01/016', '2021/01/017', '2021/01/018', '2021/01/019', '2021/01/020', '2021/01/021', '2021/01/022', '2021/01/023', '2021/01/024', '2021/01/025', '2021/01/026', '2021/01/027', '2021/01/028', '2021/01/029', '2021/01/030', '2021/01/031', '2021/01/032', '2021/01/033', '2021/01/034', '2021/01/035', '2021/01/036', '2021/01/037', '2021/01/038', '2021/01/039', '2021/01/040', '2021/01/041', '2021/01/042', '2021/01/043', '2021/01/044', '2021/01/045', '2021/01/046', '2021/01/047', '2021/01/048', '2021/01/049'],
      lineData1: [90, 87, 65, 20, 77, 13, 89, 16, 6, 39, 98, 81, 54, 67, 91, 1, 90, 57, 7, 31, 19, 6, 25, 30, 56, 19, 90, 21, 16, 76, 26, 56, 31, 35, 36, 14, 46, 21, 38, 74, 54, 65, 75, 50, 48, 36, 67, 37, 77, 15],
      lineData2: [86, 13, 56, 58, 33, 30, 13, 31, 12, 73, 4, 48, 78, 84, 30, 80, 61, 1, 46, 90, 86, 17, 15, 23, 89, 36, 63, 73, 53, 74, 16, 25, 87, 75, 13, 89, 6, 33, 63, 91, 66, 31, 67, 54, 29, 19, 91, 25, 10, 11],
      columnData: [28, 10, 2, 39, 33, 15, 4, 75, 72, 55, 20, 4, 42, 65, 47, 99, 53, 54, 24, 16, 42, 22, 90, 12, 4, 24, 71, 36, 91, 83, 73, 43, 29, 43, 77, 26, 37, 56, 1, 46, 53, 42, 11, 88, 98, 69, 58, 96, 28, 68],

    }
  },
  computed: {
  },
  create() {
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    /** echarts 冰山指数图 **/
    drawChart() {
      const testEachart = document.getElementById('testEachart') // 对应地使用ByClassName
      const myChart = this.$echarts.init(testEachart)
      myChart.setOption({
        data: ['市场活跃指数', '平均价格', '边际价格'],
        inactiveColor: '#777',
        textStyle: {
          color: '#000',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false,
            type: 'cross',
            lineStyle: {
              color: '#376df4',
              width: 2,
              opacity: 1,
            },
          },
        },
        xAxis: {
          type: 'category',
          data: this.timeData,
          axisLine: { lineStyle: { color: '#8392A5' }},
        },
        yAxis: [

          {
            type: 'value',
            name: '市场活跃指数',
            min: 0,
            max: 100,
            interval: 20,
            scale: true,
            axisLine: { lineStyle: { color: '#8392A5' }},
            splitLine: { show: false },
          },
          {
            type: 'value',
            name: '房价指数',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} k',
            },
            scale: true,
            axisLine: { lineStyle: { color: '#8392A5' }},
            splitLine: { show: false },
          },
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        dataZoom: [{
          textStyle: {
            color: '#8392A5',
          },
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          dataBackground: {
            areaStyle: {
              color: '#8392A5',
            },
            lineStyle: {
              opacity: 0.8,
              color: '#8392A5',
            },
          },
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
          show: false,
        }, {
          type: 'inside',
        }],
        animation: false,
        series: [
          {
            type: 'line',
            name: '市场活跃指数',
            data: this.lineData1,
            symbol: 'none',
            itemStyle: {
              color: '#e15759',
            },
          },
          {
            name: '平均价格',
            type: 'line',
            symbol: 'none',
            data: this.lineData2,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: '#4e79a7',
            },
          },
          {
            name: '边际价格',
            type: 'bar',
            data: this.columnData,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                barBorderRadius: false,
                color: (params) => {
                  const currentValue = parseInt(params.value)
                  if (currentValue > 0 && currentValue <= 10) {
                    return '#ceeac5'
                  }
                  if (currentValue > 10 && currentValue <= 30) {
                    return '#b1dda8'
                  }
                  if (currentValue > 30 && currentValue <= 50) {
                    return '#9ecc96'
                  }
                  if (currentValue > 50 && currentValue <= 80) {
                    return '#91c19c'
                  }
                  if (currentValue > 80 && currentValue <= 100) {
                    return '#76aa84'
                  }
                  if (currentValue > 100) {
                    return '#73a083'
                  }
                },
              },
            },
          },
        ],
      })
      window.onresize = myChart.resize
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../../assets/style/base";
  .testEachart{
    width: pxTorem(700px);
    height: pxTorem(800px);
  }
</style>
